<template>
	<view class="newLocation">
		<!-- 顶部固定栏 -->
		<view class="titlesHead">
			<view class="iconfont icon-fangxiang-xiangzuo icon" @click="yun"></view>
			<view class="titname"> 乐 居 </view>
			<view class="titRight"></view>
		</view>
		<view class="zhanwei">静安阿达</view>
		<!-- 地址列表 -->
		<view class="dingdanList">
			<view class="newlist">
				<view class="leftser">
					收件人
				</view>
				<view class="righterser">
					<input type="text" v-model="name" placeholder="请输入收货人名称"/>
				</view>
			</view>
			<view class="newlist">
				<view class="leftser">
					电话号码
				</view>
				<view class="righterser">
					<input type="text" v-model="phoneNumber" placeholder="请输入收货人名称"/>
				</view>
			</view>
			<view class="newlist">
				<view class="leftser">
					所在地区
				</view>
				<view class="righterser">
					<simple-address ref="simpleAddress" :pickerValueDefault="cityPickerValueDefault" @onConfirm="onConfirm" themeColor="#007AFF"></simple-address>
					<input type="text" v-model="chengshi" placeholder="请点击选择地址" @click="xuanze"/>
				</view>
			</view>
			<view class="newlist">
				<view class="leftser">
					详细地址
				</view>
				<view class="righterser">
					<input type="text" v-model="xiangxi" placeholder="请输入收货人名称"/>
				</view>
			</view>
			<view class="newlist">
				<view class="leftser">
					设置为默认地址
				</view>
				<view class="righterser">
					<switch :checked="zhuangtai" @change="switch1Change" />
				</view>
			</view>
		</view>
		
		
		<!-- 新增地址按钮 120rpx-->
		<view class="newAddress">
			<view class="address" @click="baocun">
				保 存 地 址
			</view>
		</view>
	</view>
</template>

<script>
	import simpleAddress from '@/components/simple-address/simple-address.vue';
	import{addAddressInfo}from '@/api/location/location.js'
	export default {
		data() {
			return {
				// 名字
				name:'',
				// 电话
				phoneNumber:'',
				// 三级联动自带的
				cityPickerValueDefault: [0, 0, 1],
				// 选择地址信息对象
				address:{},
				chengshi:'',
				// 详细地址
				xiangxi:'',
				zhuangtai:false,
				zunag:0
			};
		},
		 // components: {
		 //        simpleAddress
		 //    },
		methods:{
			// 返回上一页
			yun(){
				uni.navigateBack({
					delta: 1,
				});
			},
			// 默认按钮开关
			switch1Change(e){
				console.log(e.target.value)
				if(e.target.value){
					this.zunag = 1
				} else if(!e.target.value){
					this.zunag = 0
				}
			},
			// 点击  选择地址触发
			xuanze(){
				this.$refs.simpleAddress.open();
			},
			// 三级联动那个插件自带的方法
			onConfirm(e){
				console.log(e)
				this.address = e
				this.chengshi = this.address.label
			},
			
			// 保存地址
			baocun(){
				var result = uni.getStorageSync("token");
				// // console.log(result)
				if (result) {
					addAddressInfo(
					{
					  "city": this.address.labelArr[1],
					  "cityCode": this.address.provinceCode+"-"+this.address.cityCode+"-"+this.address.areaCode,
					  "defaultStatus": this.zunag,
					  "detailAddress": this.xiangxi,
					  "name": this.name,
					  "phoneNumber": this.phoneNumber,
					  "postCode": "",
					  "province": this.address.labelArr[0],
					  "region": this.address.labelArr[2],
					  "tag": ""
					}
					).then(res=>{
						console.log(res)
					})
					
				} else{
					uni.showModal({
						title: '登录提示',
						content: "暂未登录，是否立即登录",
						success(res) {
							console.log(res)
							if (res.confirm) {
								uni.navigateTo({
									url: '/pages/login/login'
								})
							}
						}
					})
				}
			}
			
		},
		onLoad(){
			
			
		}
	}
</script>

<style lang="less" scoped>
.newLocation{
	background-color: #f4e8ab;
	height: 100vh;
	position: relative;
	
	// 头部固定位置
	.titlesHead {
		height: 100rpx;
		width: 100%;
		position: fixed;
		top: 0;
		left: 0;
		color: white;
		display: flex;
		align-items: center;
		background-color: #135a05;
		z-index: 999;
	
		.icon {
			flex: 1;
			padding-left: 40rpx;
			box-sizing: border-box;
		}
	
		.titname {
			flex: 3;
			text-align: center;
		}
	
		.titRight {
			flex: 1;
		}
	}
	
	// 头部固定后面占位置的盒子，不要删除哈
	.zhanwei {
		width: 100%;
		height: 100rpx;
		background-color: #135a05;
		
	}
	
	// 新增地址表单
	.dingdanList{
		width: 100%;
		padding: 20rpx;
		box-sizing: border-box;
		.newlist{
			width: 100%;
			height: 120rpx;
			font-size: 32rpx;
			border-bottom: 3rpx solid #b4afb0;
			display: flex;
			justify-content: space-between;
			align-items: center;
			.leftser{
				flex: 1;
				font-size: 20rpx;
			}
			.righterser{
				flex: 3;
			}
		}
	}
	
	
	
	//保存址按钮
	.newAddress{
		width: 100%;
		height: 120rpx;
		background-color: #f4e8ab;
		display: flex;
		align-items: center;
		justify-content: center;
		position: fixed;
		bottom: 40rpx;
		left: 0;
		.address{
			width: 60%;
			height: 100rpx;
			line-height: 100rpx;
			text-align: center;
			font-size: 40rpx;
			font-weight: 700;
			
			border-radius: 50rpx;
			background-color: #1d5910;
		}
	}
}
</style>
